<template>
  <div class="problemList bg-f2">
    <div class="bg-f2 bg-fff">
      <div class="addMargin">
        <el-button class="increased btnSizeStyle" type="success" icon="el-icon-plus" :disabled="quanxianBtns.btn1" @click="increased">录入合同</el-button>
        <el-form :inline="true" class="formLine">
          <el-form-item>
            <!-- <el-select v-model="value" class="freeSelect" @change="selectChange">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
            </el-select>-->
            <el-input v-model.trim="queryCondition" clearable placeholder="合同编号、合同名称" prefix-icon="el-icon-search"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="btnSizeStyle" @click="onSubmit2()">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table
        stripe
        :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '48px' }"
        ref="multipleTable"
        :data="contractList"
        style="width: 100%"
        border
        highlight-current-row
        :default-sort="{ prop: 'deviceName' }"
        v-loading="tableLoad"
        @sort-change="sortthiscolumn"
      >
        <!-- 提示语句 -->
        <template slot="empty">{{ tableMessage }}</template>
        <el-table-column type="index" label="序号" min-width="50" align="center"></el-table-column>
        <el-table-column prop="htmc" label="合同名称" show-overflow-tooltip>
          <template slot-scope="scope">
            <span style="color: #2e92f7; cursor: pointer" @click="contractDetail(scope.row)">{{ scope.row.htmc }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="qdrq" label="签订日期" sortable min-width="120"></el-table-column>
        <el-table-column prop="ysrq" label="验收日期" sortable min-width="120"></el-table-column>
        <el-table-column label="维保期限">
          <template slot-scope="scope">
            <el-tag v-show="scope.row.wbqx === 0 ? false : true">{{ scope.row.wbqx }}个月</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="项目名称" show-overflow-tooltip min-width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.xmmc === 'null' || scope.row.xmmc === 'undefined' ? '' : scope.row.xmmc }}</span>
          </template>
        </el-table-column>
        <el-table-column label="合同金额(元)" min-width="120">
          <template slot-scope="scope">
            <span style="color: #e6a23c">{{ scope.row.htjeStr === 'null' || scope.row.htjeStr === undefined ? '' : scope.row.htjeStr }}</span>
          </template>
        </el-table-column>
        <el-table-column label="合同扫描件">
          <template slot-scope="scope">
            <el-image style="width: 45px; height: 45px" :src="scope.row.htsmj[0]" :preview-src-list="scope.row.htsmj">
              <div slot="error" class="image-slot">
                <img style="width: 100%" src="@/assets/images/shan.jpg" alt />
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="备注" show-overflow-tooltip min-width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.bz === 'null' || scope.row.bz === undefined ? '' : scope.row.bz }}</span>
          </template>
        </el-table-column>
        <el-table-column label="添加人" prop="createBy" min-width="100"></el-table-column>
        <el-table-column sortable label="添加时间" prop="tjsj" width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.tjsj === 'null' ? '' : scope.row.tjsj }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="right">
          <template slot-scope="scope">
            <el-button type="text" class="Btn_nan" :disabled="quanxianBtns.btn2" @click="editContract(scope.row)">编辑</el-button>
            <span class="operation"></span>
            <el-button type="text" size="small" class="color_f56f6f Btn_nan" :disabled="quanxianBtns.btn3" @click="isDelete(scope.row.id)" v-preventReClick>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="fooer_box">
        <div></div>
        <el-pagination
          background
          small
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next"
          :total="countList"
        ></el-pagination>
      </div>
      <!-- 合同详情 -->
      <el-dialog title="合同详情" :visible.sync="contractDialogVisible">
        <div class="dialogText">
          <el-row>
            <el-col :span="10" class="lineHight">
              <el-row>
                <span class="contentFont"> <span class="star">*</span>合同编号： </span>
                {{ contractDetailList.htbh }}
              </el-row>
              <el-row>
                <span class="contentFont"> <span class="star">*</span>合同名称： </span>
                {{ contractDetailList.htmc }}
              </el-row>
              <el-row>
                <span class="contentFont"> <span class="star">*</span>签订日期： </span>
                {{ contractDetailList.qdrq }}
              </el-row>
              <el-row>
                <span class="contentFont"> <span class="star">*</span>验收日期： </span>
                {{ contractDetailList.ysrq }}
              </el-row>
              <el-row>
                <span class="contentFont"> <span class="star">*</span>维保期限： </span>
                <el-tag v-show="contractDetailList.wbqx > 0">{{ contractDetailList.wbqx > 9 ? contractDetailList.wbqx : '0' + contractDetailList.wbqx }} 个月</el-tag>
              </el-row>
              <el-row>
                <span class="contentFont">项目名称：</span>
                {{ contractDetailList.xmmc === 'null' ? '' : contractDetailList.xmmc }}
              </el-row>
              <el-row>
                <span class="contentFont">合同金额：</span>
                <span style="color: #e6a23c">{{ contractDetailList.htjeStr === 'null' ? '' : contractDetailList.htjeStr }}</span>
              </el-row>
              <el-row>
                <span class="contentFont">合同扫描件：</span>
                <el-image style="width: 45px; height: 45px; vertical-align: middle" :src="contractDetailList.htsmj[0]" :preview-src-list="contractDetailList.htsmj">
                  <div slot="error" class="image-slot">
                    <img style="width: 100%" src="@/assets/images/shan.jpg" alt />
                  </div>
                </el-image>
              </el-row>
            </el-col>
            <el-col :span="10" class="lineHight">
              <el-row>
                <span class="contentFont">甲方：</span>
                {{ contractDetailList.jfmc === 'null' ? '' : contractDetailList.jfmc }}
              </el-row>
              <el-row>
                <span class="contentFont">甲方联系人：</span>
                {{ contractDetailList.jflxr === 'null' ? '' : contractDetailList.jflxr }}
              </el-row>
              <el-row>
                <span class="contentFont">甲方联系电话：</span>
                {{ contractDetailList.lxrdh === 'null' ? '' : contractDetailList.lxrdh }}
              </el-row>
              <el-row>
                <span class="contentFont">乙方：</span>
                {{ contractDetailList.yfmc === 'null' ? '' : contractDetailList.yfmc }}
              </el-row>
              <el-row>
                <span class="contentFont">乙方联系人：</span>
                {{ contractDetailList.yflxr === 'null' ? '' : contractDetailList.yflxr }}
              </el-row>
              <el-row>
                <span class="contentFont">乙方联系电话：</span>
                {{ contractDetailList.yflxdh === 'null' ? '' : contractDetailList.yflxdh }}
              </el-row>
            </el-col>
          </el-row>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="contractDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="contractDialogVisible = false">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { pinT } from '../../utils/allUrl.js'
// import { startLoading, endLoading } from '../../utils/loading.js'
import { getUrl } from '../../utils/getUrl.js'
import { timeLoad, tableMessageText } from '@/assets/js/setTime'
export default {
  data: function () {
    return {
      // value: '',
      // contractName: '',
      currentPage: 1, // 页码
      pageSize: 10, // 页数
      contractList: [], // 合同数据源
      // countPage: 0,
      countList: 0, // 总页数
      contractDialogVisible: false, // 详情
      contractDetailList: {
        htsmj: [],
      },
      queryCondition: '', // 合同编号/合同名称搜索
      quanxianBtns: {
        btn1: true,
        btn2: true,
        btn3: true,
      },
      tableLoad: false,
      tableTimer: null,
      tableMessage: '',
      listQuery: {
        sortby: '',
        order: '',
      },
    }
  },
  watch: {
    tableLoad(newVal, oldVal) {
      this.tableTimer = setTimeout(() => {
        if (this.tableLoad) {
          this.tableLoad = false
          this.roleList = []
          this.tableMessage = tableMessageText
          // this.total = 0
        }
      }, timeLoad)
    },
  },
  created: function () {
    this.jurisdictionBtn()
    this.getContractList()
  },
  mounted: function () {
    // startLoading(document.getElementById('userBig'))
  },
  methods: {
    sortthiscolumn(column) {
      // 排序
      this.tableLoad = true // 加载中样式
      if (column.order === 'descending') {
        this.listQuery.sortby = column.prop.toUpperCase()
        this.listQuery.order = 'DESC' // 降序
      } else if (column.order === 'ascending') {
        this.listQuery.sortby = column.prop.toUpperCase()
        this.listQuery.order = 'ASC' // 升序
      } else {
        this.listQuery.sortby = ''
        this.listQuery.order = '' // 没有排序
      }
      this.onSubmit()
    },
    // 获取按钮权限
    jurisdictionBtn() {
      const menus = JSON.parse(getUrl('jurisdiction'))
      menus.forEach((item) => {
        if (item.qxdm === 'htgl:htlb') {
          item.children.forEach((item2) => {
            if (item2.qxdm === 'htgl:create') {
              this.quanxianBtns.btn1 = false // 合同新增
            } else if (item2.qxdm === 'htgl:update') {
              this.quanxianBtns.btn2 = false // 合同修改
            } else if (item2.qxdm === 'htgl:delete') {
              this.quanxianBtns.btn3 = false // 合同删除
            }
          })
        }
      })
    },
    // 获取数据
    getContractList() {
      clearTimeout(this.tableTimer)
      this.tableLoad = true
      const params = new URLSearchParams()
      params.append('M_', this.currentPage)
      params.append('N_', this.pageSize)
      this.setList(params)
    },
    async setList(params) {
      const { data: res } = await this.$http.post(`${pinT}htgl/list`, params)
      switch (res.code) {
        case '0000':
          res.data.list.forEach((item) => {
            if (item.htsmj === null) {
              item.htsmj = ''
            }
            item.htsmj = item.htsmj.split(',')
          })
          this.countList = res.data.countList
          this.contractList = res.data.list
          break
        default:
          this.contractList = []
          this.countList = 0
          this.tableMessage = res.message
          break
      }
      this.tableLoad = false // 表格加载中样式
    },
    // 合同详情
    contractDetail(list) {
      this.contractDialogVisible = true
      this.contractDetailList = list
    },
    handleSizeChange(e) {
      this.currentPage = 1
      this.pageSize = e
      this.onSubmit()
    },
    handleCurrentChange(e) {
      this.currentPage = e
      this.onSubmit()
    },
    increased: function () {
      this.$router.push('/addContract')
    },
    isDelete(id) {
      this.$confirm('确定移除合同?', '移除合同', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          const params = new URLSearchParams()
          params.append('id', id)
          const { data: res } = await this.$http.post(`${pinT}htgl/delete`, params)
          if (res.code === '0014') {
            return
          } else if (res.code !== '0000') {
            return this.$message({
              type: 'error',
              message: res.message,
              center: true,
            })
          }
          this.$message({
            type: 'success',
            message: res.message,
            center: true,
          })
          this.getContractList()
        })
        .catch(() => {})
    },
    onSubmit2() {
      this.currentPage = 1
      this.pageSize = 10
      this.onSubmit()
    },
    onSubmit() {
      clearTimeout(this.tableTimer)
      this.tableLoad = true
      const params = new URLSearchParams()
      params.append('htmc', this.queryCondition)
      params.append('M_', this.currentPage)
      params.append('N_', this.pageSize)
      params.append('order', this.listQuery.sortby) // 排序字段
      params.append('sort', this.listQuery.order) // DESC降序 ASC升序
      this.setList(params)
    },
    editContract(content) {
      this.$router.push({
        name: 'editContract', // 路由
        query: {
          // 传递参数
          content: content.id,
        },
      })
    },
  },
}
</script>
<style lang="scss" scoped>
// ::v-deep .el-image-viewer__close .el-icon-circle-close {
//   font-size: 45px;
// }
.addMargin {
  .increased {
    float: left;
    margin: 0 10px 15px 0;
    font-size: 14px;
    text-align: center;
  }
  .formLine {
    padding: 0;
    // margin-top: 15px;
    float: left;
  }
}
.operation {
  display: inline-block;
  margin: 0 5px;
  height: 10px;
  border-left: 1px solid #b3b3b3;
}
// .delete {
//   color: #f56c6c;
// }
.Btn_nan {
  padding: 0;
}
// .delete.el-button--text:focus,
// .delete.el-button--text:hover {
//   color: #f56c6c;
// }
.dialogText {
  font-size: 14px;
  color: #333;
  .star {
    color: #f56c6c;
  }
  .contentFont {
    display: inline-block;
    width: 103px;
    color: #7a7a7a;
    text-align: right;
  }
  .lineHight .el-row {
    line-height: 40px;
  }
}
.fooer_box {
  height: 48px;
  line-height: 47px;
  padding: 0 15px;
  box-sizing: border-box;
  border-top: none;
  border: 1px solid #eaeaea;
  border-top: 0;
  display: flex;
  justify-content: space-between;
  .el-pagination {
    padding: 6px 5px;
  }
}
</style>
